21xrx.com
2024-12-22 19:00:11 Sunday
登录
文章检索 我的文章 写文章
用 JavaScript 编写简单小游戏的代码示例
2023-06-11 08:13:06 深夜i     --     --
JavaScript 小游戏 DOM

我最近开始学习 JavaScript，想试着写一个简单的小游戏。经过一番尝试，我成功地写出来了一个小游戏的代码，现在和大家分享一下。

这个小游戏是一个兔子抓萝卜的游戏。我们需要通过键盘控制兔子的移动，抓住随机出现的萝卜。下面是代码：

script

// 初始化游戏区域和兔子位置


let field = document.querySelector(".game-field");


let rabbit = document.querySelector(".rabbit");


let rabbitLeft = 200;


rabbit.style.left = rabbitLeft + "px";


// 监听键盘事件


document.addEventListener("keydown", function(event) {


 if(event.key === "ArrowLeft") { // 向左移动


  rabbitLeft -= 10;


  rabbit.style.left = rabbitLeft + "px";


 } else if(event.key === "ArrowRight") { // 向右移动


  rabbitLeft += 10;


  rabbit.style.left = rabbitLeft + "px";


 }


});


// 每隔一段时间随机出现萝卜


setInterval(function() {


 let carrot = document.createElement("div");


 carrot.classList.add("carrot");


 carrot.style.left = Math.floor(Math.random() * 570) + "px";


 field.appendChild(carrot);


 // 判断兔子是否抓到萝卜


 let isCaught = false;


 rabbit.addEventListener("click", function() {


  isCaught = true;


  field.removeChild(carrot);


 });


 // 游戏结束


 setTimeout(function() {


  if(!isCaught) {


   alert("游戏结束");


   window.location.reload();


  }


 }, 5000);


}, 2000);

代码中用到了键盘事件、随机数生成、DOM 操作等知识点。通过这个小游戏的编写，我对 JavaScript 的语法以及应用有了更加深刻的理解。

操作

  
  

评论区

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