21xrx.com
2024-12-23 00:40:09 Monday
登录
文章检索 我的文章 写文章
学习JavaScript,轻松制作小游戏!
2023-06-11 04:52:59 深夜i     --     --
JavaScript 小游戏 制作 代码

JavaScript是最受欢迎的高级Web前端编程语言之一。它可以让你轻松编写交互式和动态的网页内容,甚至可以创建自己的小游戏!在这篇文章中,我们将介绍如何使用JavaScript编写简单的小游戏。下面是一些基本的JavaScript小游戏代码:

1. 点击游戏

这个游戏的目的是在规定时间内点击屏幕上出现的形状。首先,需要在HTML中创建一个canvas元素。然后,在JavaScript中使用canvas API绘制一些形状,通过添加事件监听器来检测用户点击,以及用计时器来检测时间。以下是代码示例:

script

var canvas = document.getElementById("game");

var ctx = canvas.getContext("2d");

var shapeX, shapeY, shapeR, time, score, timer;

function init() {

 shapeX = Math.floor(Math.random() * canvas.width);

 shapeY = Math.floor(Math.random() * canvas.height);

 shapeR = Math.floor(Math.random() * 50 + 10);

 time = 10;

 score = 0;

 clearTimeout(timer);

 timer = setTimeout(gameOver, 10000);

 canvas.addEventListener("click", handleClick);

 drawShape();

}

function drawShape() {

 ctx.clearRect(0, 0, canvas.width, canvas.height);

 ctx.beginPath();

 ctx.arc(shapeX, shapeY, shapeR, 0, 2 * Math.PI);

 ctx.fillStyle = "red";

 ctx.fill();

}

function handleClick(event) {

 var x = event.clientX - canvas.offsetLeft;

 var y = event.clientY - canvas.offsetTop;

 if (Math.sqrt(Math.pow(x - shapeX, 2) + Math.pow(y - shapeY, 2)) <= shapeR) {

  score++;

  init();

 }

}

function gameOver() {

 canvas.removeEventListener("click", handleClick);

 alert("Game over! Your score: " + score);

}

init();

2. 小蛇游戏

这个游戏将涉及更复杂的游戏逻辑和控制。你需要使用键盘控制小蛇移动,以吃到食物并避开障碍物。以下是代码示例:

script

var canvas = document.getElementById("game");

var ctx = canvas.getContext("2d");

var snake, food, score, dir, gameover;

function init() {

 snake = [ y: 5];

 food = {x: Math.floor(Math.random() * canvas.width / 10), y: Math.floor(Math.random() * canvas.height / 10)};

 score = 0;

 dir = 0;

 gameover = false;

 canvas.addEventListener("keydown", handleKeydown);

 draw();

}

function draw() {

 ctx.clearRect(0, 0, canvas.width, canvas.height);

 ctx.fillStyle = "green";

 for (var i = 0; i < snake.length; i++) {

  ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10);

 }

 ctx.fillStyle = "red";

 ctx.fillRect(food.x * 10, food.y * 10, 10, 10);

}

function handleKeydown(event) {

 if (event.keyCode == 37 && dir != 1) dir = 0; // left

 else if (event.keyCode == 38 && dir != 3) dir = 2; // up

 else if (event.keyCode == 39 && dir != 0) dir = 1; // right

 else if (event.keyCode == 40 && dir != 2) dir = 3; // down

}

function update() {

 if (gameover) return;

 var head = {x: snake[0].x, y: snake[0].y};

 if (dir == 0) head.x--;

 else if (dir == 1) head.x++;

 else if (dir == 2) head.y--;

 else if (dir == 3) head.y++;

 if (head.x < 0 || head.x >= canvas.width / 10 || head.y < 0 || head.y >= canvas.height / 10) gameover = true;

 for (var i = 0; i < snake.length; i++) {

  if (snake[i].x == head.x && snake[i].y == head.y) gameover = true;

 }

 if (head.x == food.x && head.y == food.y) {

  snake.unshift(head);

  food = {x: Math.floor(Math.random() * canvas.width / 10), y: Math.floor(Math.random() * canvas.height / 10)};

  score++;

 }

 else {

  snake.pop();

  snake.unshift(head);

 }

 draw();

 setTimeout(update, 200);

}

init();

update();

以上是两个简单的小游戏,你可以通过复制以上代码并自己修改和试验来进一步学习和探索JavaScript编程。祝你好运!

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复