Skip to content

Commit

Permalink
Added difficulty selection for the pinball and version 2.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuanretro
yuanretro committed Sep 16, 2024
1 parent 755c36f commit a1e0809
Show file tree
Hide file tree
Showing 2 changed files with 146 additions and 45 deletions.
94 changes: 72 additions & 22 deletions en/pinball.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
border-radius: 10px; /* Small rounded corner */
cursor: pointer; /* Mouse pointer style */
transition: background-color 0.3s ease; /* Transition effect of background */
width: 70px;
height: 40px;
width: 100px;
height: 50px;
}
/* Hover */
.custom-button:hover {
Expand Down Expand Up @@ -45,19 +45,34 @@ <h2>Pinball game V2.0... Updated 2024.09.11</h2>
would be over. The game would restart after you press the button on the pop-out dialog.</p>
<p>Big thank to Nille Cheng and his book 'Learn to Create Web Games Using Javascript'(ISBN 978-7-115-46238-1), as the
concept of this game and part of the algorithm is base on his codes in the book.</p>
<label for="easy">Difficulty selection<br/></label>
<!--Checkboxes for three difficulty levels-->
<input type="checkbox" id="easy" onclick="clickCheckbox(this)"/>
<label for="easy">Easy<br /></label>
<input type="checkbox" id="hard" onclick="clickCheckbox(this)"/>
<label for="easy">Hard<br /></label>
<input type="checkbox" id="insane" onclick="clickCheckbox(this)"/>
<label for="easy">Insane<br /></label>
<input type="button" id="start" class="custom-button" value="Start!" onclick="start()"/><!--Start game button-->
<br />
<input type="button" id="leftButton" class="custom-button" value="Left"/><!--Left button-->
<!--Create a 400 by 400 px canvas for the game-->
<canvas id="canvas" width="400" height="400"></canvas>
<input type="button" id="rightButton" class="custom-button" value="Right"/><!--Right button-->
<script type="text/javascript">
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d"); //Create canvas and pointer
var easy = document.getElementById("easy");
var hard = document.getElementById("hard");
var insane = document.getElementById("insane");//Three checkbox objects
//Define several variables for later use
var startX = 0;
var startY = 0;
var panelX = 0;
var flag = false;
var score = 0;
var intervalTime = 30;
var mainInterval;
var leftInterval;
var rightInterval;
//var testI = 0;
Expand Down Expand Up @@ -86,6 +101,29 @@ <h2>Pinball game V2.0... Updated 2024.09.11</h2>
}
}

function clickCheckbox (checkbox) {
if(checkbox.checked) {
easy.checked = false;
hard.checked = false;
insane.checked = false;
checkbox.checked = true;
}
//Avoid multiple checkboxes from being selected at the same time
}

function readCheckbox () {
if(easy.checked) {
return 30;
}else if(hard.checked) {
return 20;
}else if(insane.checked) {
return 10;
}else {
return 30;
}
//Check which checkbox is being selected and return the matching interval
}

function prep() {
//Generate random numbers for the position of the ball and the panel separately
//The generating process will continue until a number between the limits are found
Expand Down Expand Up @@ -117,7 +155,6 @@ <h2>Pinball game V2.0... Updated 2024.09.11</h2>
}
}
}
prep();
var ball = {
//Define items about the bouncing ball
//Including position and internal moving and collision detect functions
Expand Down Expand Up @@ -231,25 +268,38 @@ <h2>Pinball game V2.0... Updated 2024.09.11</h2>
rightButton.addEventListener("mousedown", rightClick); //The same to right button
rightButton.addEventListener("mouseup", function() {clearInterval(rightInterval);});
window.addEventListener("keydown", dbPanelKey); //Monitor keyboard press
//Refresh the ball movement every 20 ms
setInterval(function() {
if (flag == true) {
//Perform init because game over last time, redefine the ball and panel position
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
flag = false;
} else {
ctx.clearRect(0, 0, 400, 400); //Clear the square area last time
ctx.font = "20px Arial"; //Select the font for score display
ctx.fillText("score:" + score, 10, 30); //Write the score on the canvas
ball.draw(); //Invoke the drawing function of the ball
panel.draw(); //Invoke the drawing function of the panel
ball.move(panel.x, panel.x + panel.xSize); //Invoke the move and collision detection function of the ball
ctx.strokeRect(0, 0, 400, 400); //Mark the square area of the canvas
}
}, 30);
//Refresh the ball movement after a set period of time
function start () {
clearInterval(mainInterval);
score = 0;
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
clearInterval(leftInterval);
clearInterval(rightInterval);
intervalTime = readCheckbox();//This interval is determined by the checkbox (easy=30ms, hard=20ms, insane=10ms, default=30ms)
mainInterval = setInterval(function() {
if (flag == true) {
//Perform init because game over last time, redefine the ball and panel position
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
flag = false;
clearInterval(leftInterval);
clearInterval(rightInterval);//If died last time, then reset the timer to prevent the panel from moving randomly
} else {
ctx.clearRect(0, 0, 400, 400); //Clear the square area last time
ctx.font = "20px Arial"; //Select the font for score display
ctx.fillText("score:" + score, 10, 30); //Write the score on the canvas
ball.draw(); //Invoke the drawing function of the ball
panel.draw(); //Invoke the drawing function of the panel
ball.move(panel.x, panel.x + panel.xSize); //Invoke the move and collision detection function of the ball
ctx.strokeRect(0, 0, 400, 400); //Mark the square area of the canvas
}
}, intervalTime);
}
</script>
</body>
</html>
97 changes: 74 additions & 23 deletions pinball.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
border-radius: 10px; /* 小的圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: background-color 0.3s ease; /* 背景颜色的过渡效果 */
width: 70px;
height: 40px;
width: 100px;
height: 50px;
}
/* 鼠标悬停时的效果 */
.custom-button:hover {
Expand All @@ -38,22 +38,37 @@
<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
</ul>
<br />
<h2>弹球游戏 V2.0 <del>2024.09.11</del></h2>
<h2>弹球游戏 V2.2 <del>更新时间2024.09.12</del></h2>
<p>用纯JavaScript写的小小游戏，可以分别用键盘的“a”和“d”键控制挡板左右移动，也可以使用<del>（移动设备友好）</del>的按钮哦~<br />如果浏览器不支持或者屏蔽了JavaScript，游戏可（ken）能（ding）就不能运行了哦~<br />每次接住弹球可以得到5分，但是如果没接住的话，就寄喽~</p>
<p>感谢<del>（n年前买的x）</del>程晨的《JavaScript网页游戏制作轻松学》(ISBN 978-7-115-46238-1)，这里的算法和部分代码参考了书中的思路哦~</p>
<label for="easy">难度选择<br/></label>
<!--创建三个难度等级对应的复选框-->
<input type="checkbox" id="easy" onclick="clickCheckbox(this)"/>
<label for="easy">简单（EZ）<br /></label>
<input type="checkbox" id="hard" onclick="clickCheckbox(this)"/>
<label for="easy">困难（HD）<br /></label>
<input type="checkbox" id="insane" onclick="clickCheckbox(this)"/>
<label for="easy">疯狂（IN）<br /></label>
<input type="button" id="start" class="custom-button" value="开始游戏！" onclick="start()"/><!--进入游戏按钮-->
<br />
<input type="button" id="leftButton" class="custom-button" value="左"/><!--向左按钮-->
<!--创建400x400像素的画布-->
<canvas id="canvas" width="400" height="400"></canvas>
<input type="button" id="rightButton" class="custom-button" value="右"/><!--向右按钮-->
<script type="text/javascript">
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d"); //创建画布和画笔对象
var easy = document.getElementById("easy");
var hard = document.getElementById("hard");
var insane = document.getElementById("insane");//创建三个复选框对象
//声明一些杂七杂八的变量
var startX = 0;
var startY = 0;
var panelX = 0;
var flag = false;
var score = 0;
var intervalTime = 30;
var mainInterval;
var leftInterval;
var rightInterval;
//var testI = 0;
Expand All @@ -80,6 +95,29 @@
}
}
}

function clickCheckbox (checkbox) {
if(checkbox.checked) {
easy.checked = false;
hard.checked = false;
insane.checked = false;
checkbox.checked = true;
}
//防止同时选择多个复选框
}

function readCheckbox () {
if(easy.checked) {
return 30;
}else if(hard.checked) {
return 20;
}else if(insane.checked) {
return 10;
}else {
return 30;
}
//判断选中了哪个复选框，返回对应的间隔时间
}

function prep() {
//随机生成弹球和挡板的初始位置坐标
Expand Down Expand Up @@ -113,7 +151,6 @@
}
}
}
prep();
var ball = {
//声明弹球的基本属性
//包括初始坐标，下一步的移动速度和一些方法
Expand Down Expand Up @@ -228,25 +265,39 @@
rightButton.addEventListener("mousedown", rightClick);
rightButton.addEventListener("mouseup", function() {clearInterval(rightInterval);});
window.addEventListener("keydown", dbPanelKey); //检测是否有键盘按键按下
//每隔20毫秒刷新一次弹球位置（更改这个就可以显著改变游戏难度哦~）
setInterval(function() {
if (flag == true) {
//上一次寄了，所以重新生成小球和挡板的位置（也许可以但不能百分百避免游戏寄掉的死循环）
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
flag = false;
} else {
ctx.clearRect(0, 0, 400, 400); //清除画布，不要留下轨迹
ctx.font = "20px GenshinImpactZhLv1"; //选择积分显示字体
ctx.fillText("分数：" + score, 10, 30); //在画布上显示最新积分
ball.draw(); //调用方法绘制弹球
panel.draw(); //调用方法绘制挡板
ball.move(panel.x, panel.x + panel.xSize); //移动弹球，同时传入挡板最新位置，进行碰撞检测
ctx.strokeRect(0, 0, 400, 400); //用黑线标记画布边界hanges.
}
}, 30);
//每隔特定时间刷新一次弹球位置（更改这个时间就可以显著改变游戏难度哦~）
function start() {
//点击开始按钮之后就会来到这里～
clearInterval(mainInterval);
score = 0;
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
clearInterval(leftInterval);
clearInterval(rightInterval);
intervalTime = readCheckbox();//这个间隔时间是根据难度决定的哦～（EZ=30ms，HD=20ms，IN=10ms，不选=30ms）
mainInterval = setInterval(function() {
if (flag == true) {
//上一次寄了，所以重新生成小球和挡板的位置（也许可以但不能百分百避免游戏寄掉的死循环）
prep();
ball.x = startX;
ball.y = startY;
panel.x = panelX;
flag = false;
clearInterval(leftInterval);
clearInterval(rightInterval);//如果寄了就重置定时器，防止重开之后挡板不受控移动
} else {
ctx.clearRect(0, 0, 400, 400); //清除画布，不要留下轨迹
ctx.font = "20px GenshinImpactZhLv1"; //选择积分显示字体
ctx.fillText("分数：" + score, 10, 30); //在画布上显示最新积分
ball.draw(); //调用方法绘制弹球
panel.draw(); //调用方法绘制挡板
ball.move(panel.x, panel.x + panel.xSize); //移动弹球，同时传入挡板最新位置，进行碰撞检测
ctx.strokeRect(0, 0, 400, 400); //用黑线标记画布边界hanges.
}
}, intervalTime);
}
</script>
</body>
</html>

0 comments on commit a1e0809

Please sign in to comment.