触摸屏幕来控制游戏
我们还可以在触摸屏上控制红色方块。
在myGameArea对象中添加一个方法，该方法使用触摸屏幕的x和y坐标：
例
var myGameArea = {
canvas：document.createElement（“canvas”），
start：function（）{
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext（“2d”）;
document.body.insertBefore（this.canvas，document.body.childNodes [0]）;
this.interval = setInterval（updateGameArea，20）;
window.addEventListener（'touchmove'，function（e）{
myGameArea.x = e.touches [0] .screenX;
myGameArea.y = e.touches [0] .screenY;
}）
}，
clear：function（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）;
}
}
然后，如果用户触摸屏幕，则可以使用与鼠标光标相同的代码移动红色方块：
例
function updateGameArea（）{
myGameArea.clear（）;
if（myGameArea.touchX && myGameArea.touchY）{
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update（）;
}
完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
</script>
<p>仅适用于触摸屏：用手指移动红色方块。.</p>
</body>
</html>
|
