javascript可以制作哪些游戏?,javascript可以干什么

本篇文章给大家谈谈javascript可以用什么工具编写，以及javascript可以制作哪些游戏?，希望对各位有所帮助，不要忘了收藏本站喔。

最终效果图：

1、 使用html 5 的canvas 技术和java实现弹球游戏

   整体流程图：

 1.1 html5 canvas技术的使用

         首先在html页面中定义画布。

    <canvas bgcolor = "#FFF" id="gamePane" width="1000" height="500" tabindex="0">
Sorry, your browser doesn't support the HTML5 game.
</canvas>

定义完画布之后就可以在java代码中对画布进行操作Deepl降重。

canvas = document.getElementById('gamePane');
ctx = canvas.getContext("2d");

在画布中构画图形。  

         ballImg = new Image();
         ballImg.src = "/site_media/images/kkball.ico";
         ctx.drawImage(ballImg, ballX- radius, ballY-radius, 2*radius, 2*radius);

1.2 java弹球游戏实现

         使用canvas技术我们实现了弹球游戏的GUI界面，接下来是游戏功能逻辑。

         1.2.1首先明确游戏功能：

A.      游戏元素： 弹球，砖块，挡板，道具。

B.      游戏开始， 球从挡板出发，碰撞到砖块或者游戏边界时会反弹，碰撞到砖块时砖块消失，如果砖块隐藏了道具，道具显示并下落，碰到挡板时会发挥道具效果。弹球碰到挡板时也会反弹，但是如果碰到下边界则会损失游戏生命。

C.      当砖块完全消失时进入下一关，随着关卡数增加，板的长度会减小，球的速度回加快。

D.      道具： 1. 使弹球速度乘以1.3；2. 使弹球速度除以1.3；3. 使板的长度乘以2；4. 使板的长度除以2；

1.2.2 画布的刷新

画布的刷新使用html中的定时器实现。每0.003秒调用一次draw，更新画面。
 

 interval = setInterval(draw, 3);

1.2.3用户交互 

用户通过鼠标进行交互，游戏还未开始时， 球和板的x坐标都会随鼠标x坐标变化。这时点击鼠标左键，球和板的x坐标不再变化，这时可以设置球运行方向，方向为鼠标所在位置。游戏开始后，板x坐标随鼠标x坐标变化。

为鼠标点击和移动设置响应函数。

canvas.addEventListener('mousedown',onMouseDown, false);
canvas.addEventListener('mousemove', padMove, false);
canvas.addEventListener('mouseup', start, false);

鼠标事件响应函数。

//鼠标落下点击事件
function onMouseDown(e){
        if(isStart==0){
           isPressed = 1;
 }
}
    //鼠标移动点击事件
function padMove(e){
var x;
x = e.layerX;
x = x<padWidth/2?padWidth/2:x;
x = x>(worldWidth-padWidth/2)?(worldWidth-padWidth/2):x;
padX = x;
 
if(isStart==0){ //如果游戏还未开始，则需要重新绘制板，如果游戏开始了，板的绘制在draw中完成。
           if(isPressed == 0){
                    ballX = padX;
                    ctx.clearRect(0, worldHeight-padHeight-2*radius, worldWidth, 2*radius); //clear the pad                 
                    drawBall();
                    drawPad();
           }
}
}
 
//鼠标抬起事件函数，设置弹球角度，设置定时器定时刷新页面。
function start(e){
if(isStart==0){
           ballAngle = Math.atan((worldHeight- e.layerY)/(e.layerX - ballX));
           if(ballAngle > 0){
                    ballAngle = - ballAngle;
           }
           else{
                    ballAngle = Math.PI - ballAngle;
           }
 
 
           isStart =1;
 
           isPressed = 0;
 
           interval = setInterval(draw, 3);
}
}

 1.2.4 弹球运动与碰撞检测

       弹球位置更新。

ballX = ballX + ballSpeed * Math.cos(ballAngle);
         ballY = ballY + ballSpeed * Math.sin(ballAngle);

  球游戏边界碰撞检测。 

//球碰撞到左右两边边界
if(ballX < radius || ballX > worldWidth - radius){
           ballAngle = Math.PI - ballAngle;
}
//球碰到上边界
if(ballY < radius){
           ballAngle = Math.PI*2 - ballAngle;
}
//球碰到下边界
if(ballY > worldHeight-radius){
//如果球未碰到板上，则游戏停止，判断生