前言
JavaScript是最好的语言之一，尤其是在前端开发中。在本文中，您将找到7个为初学者提供免费源代码的最佳javascript项目。
手把手教你7个有趣的JavaScript 项目-上「附源码」（本篇）
手把手教你7个有趣的JavaScript 项目-下「附源码」
1.使用JavaScript创建待办事项列表应用
如果您是javascript语言的初学者，则待办事项列表应用程序是最好的和最容易的应用程序之一，如果您使用HTML CSS和一点点的javascript，则可以创建此简单的待办事项列表应用程序，您将找到源代码这个js项目的底部。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>创建待办事项列表应用</title>
<style type="text/css">
$primary: #313e50;
$grey: #cdcdcd;
$secondary: #1dd2af;
%reset {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
}
%transition {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
body {
background: #f1f1f1;
margin-top: 2rem;
}
/*PEN STYLES*/
.tasker {
max-width: 400px;
margin: 0 auto;
.error {
display: none;
background: rgba(237, 28, 36, 0.7);
color: #fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 5px;
text-align: center;
}
ul {
@extend %reset;
background: #fff;
}
li,
.error,
button,
input {
@extend %reset;
font: 18px/1.25em Helvetica, Arial, Sans-serif;
}
}
.tasker-header {
display: inline-flex;
background: $primary;
justify-content: space-between;
width: 100%;
input,
button {
color: #fff;
box-sizing: border-box;
font-size: 1.25em;
padding: 14px;
}
input {
flex-grow: 2;
}
button {
@extend %transition;
background: $secondary;
border-left: 1px solid ($secondary * 1.05);
&:hover {
background: $secondary * 1.1;
}
}
}
.tasker-body {
.task {
display: block;
position: relative;
padding: 14px 40px 14px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:last-child {
border-bottom: none;
}
&:hover > button {
opacity: 1;
}
&.completed {
color: $grey;
text-decoration: line-through;
}
input {
margin-right: 10px;
}
button {
@extend %transition;
color: $grey;
margin: 14px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
&:hover {
color: #ed1c24;
}
}
}
}
</style>
</head>
<body>
<!--PEN CODE-->
<div id="tasker" class="tasker">
<div id="error" class="error">Please enter a task</div>
<div id="tasker-header" class="tasker-header">
<input type="text" id="input-task" placeholder="Enter a task">
<button id="add-task-btn"><i class="fa fa-fw fa-plus"></i>
</button>
</div>
<div class="tasker-body">
<ul id="tasks"></ul>
</div>
</div>
<!--END PEN CODE-->
<script type="text/javascript">
(function() {
'use strict';
var tasker = {
init: function() {
this.cacheDom();
this.bindEvents();
this.evalTasklist();
},
cacheDom: function() {
this.taskInput = document.getElementById("input-task");
this.addBtn = document.getElementById("add-task-btn");
this.tasklist = document.getElementById("tasks");
this.tasklistChildren = this.tasklist.children;
this.errorMessage = document.getElementById("error");
},
bindEvents: function() {
this.addBtn.onclick = this.addTask.bind(this);
this.taskInput.onkeypress = this.enterKey.bind(this);
},
evalTasklist: function() {
var i, chkBox, delBtn;
//BIND CLICK EVENTS TO ELEMENTS
for (i = 0; i < this.tasklistChildren.length; i += 1) {
//ADD CLICK EVENT TO CHECKBOXES
chkBox = this.tasklistChildren[i].getElementsByTagName("input")[0];
chkBox.onclick = this.completeTask.bind(this, this.tasklistChildren[i], chkBox);
//ADD CLICK EVENT TO DELETE BUTTON
delBtn = this.tasklistChildren[i].getElementsByTagName("button")[0];
delBtn.onclick = this.delTask.bind(this, i);
}
},
render: function() {
var taskLi, taskChkbx, taskVal, taskBtn, taskTrsh;
//BUILD HTML
taskLi = document.createElement("li");
taskLi.setAttribute("class", "task");
//CHECKBOX
taskChkbx = document.createElement("input");
taskChkbx.setAttribute("type", "checkbox");
//USER TASK
taskVal = document.createTextNode(this.taskInput.value);
//DELETE BUTTON
taskBtn = document.createElement("button");
//TRASH ICON
taskTrsh = document.createElement("i");
taskTrsh.setAttribute("class", "fa fa-trash");
//INSTERT TRASH CAN INTO BUTTON
taskBtn.appendChild(taskTrsh);
//APPEND ELEMENTS TO TASKLI
taskLi.appendChild(taskChkbx);
taskLi.appendChild(taskVal);
taskLi.appendChild(taskBtn);
//ADD TASK TO TASK LIST
this.tasklist.appendChild(taskLi);
},
completeTask: function(i, chkBox) {
if (chkBox.checked) {
i.className = "task completed";
} else {
this.incompleteTask(i);
}
},
incompleteTask: function(i) {
i.className = "task";
},
enterKey: function(event) {
if (event.keyCode === 13 || event.which === 13) {
this.addTask();
}
},
addTask: function() {
var value = this.taskInput.value;
this.errorMessage.style.display = "none";
if (value === "") {
this.error();
} else {
this.render();
this.taskInput.value = "";
this.evalTasklist();
}
},
delTask: function(i) {
this.tasklist.children[i].remove();
this.evalTasklist();
},
error: function() {
this.errorMessage.style.display = "block";
}
};
tasker.init();
}());
</script>
</body>
</html>2.使用JavaScript和CSS创建垂直时间轴（里程碑）
您可以使用javascript初学者创建的第二个小项目是时间轴，许多现代网站都使用该时间轴使网站更具交互性和动态性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS创建垂直时间轴（里程碑）</title>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
background: #456990;
color: #fff;
overflow-x: hidden;
padding-bottom: 50px;
} /* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
background: #F45B69;
padding: 100px 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul {
background: #456990;
padding: 50px 0;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #F45B69;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #F45B69;
}
time {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li::after {
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: #F45B69;
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 250px;
}
.timeline ul li:nth-child(even) div {
left: -289px;
/*250+45-6*/
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;
}
}
</style>
</head>
<body>
<section class="intro">
<div class="container">
<h1>Vertical Timeline ↓</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>1934</time> demo1
</div>
</li>
<li>
<div>
<time>1937</time> demo1
</div>
</li>
<li>
<div>
<time>1940</time> demo1
</div>
</li>
<li>
<div>
<time>1943</time> demo1
</div>
</li>
<li>
<div>
<time>1946</time> demo1
</div>
</li>
<li>
<div>
<time>1956</time> demo1
</div>
</li>
<li>
<div>
<time>1957</time> demo1
</div>
</li>
<li>
<div>
<time>1967</time>demo1
</div>
</li>
<li>
<div>
<time>1977</time> demo1
</div>
</li>
<li>
<div>
<time>1985</time> demo1
</div>
</li>
<li>
<div>
<time>2000</time> demo1
</div>
</li>
<li>
<div>
<time>2005</time> demo1
</div>
</li>
</ul>
</section>
<script type="text/javascript">
(function() {
'use strict';
// define variables
var items = document.querySelectorAll(".timeline li");
// check if an element is in viewport
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
})();
</script>
</body>
</html>3.用JavaScript构建一个简单的井字游戏
如果您想构建简单而有趣的东西来练习JavaScript知识，那么使用HTML CSS和JS创建TIC TAC TOE游戏对您来说是个不错的选择，该游戏虽然简单但并不容易，因此您需要专注于该项目的逻辑方面，因为它是该项目最具挑战性的部分。
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FreeCodeCamp: Tictactoe</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yesteryear);
$app-background-color : #508ABB;
$app-row-height : 100%;
$winAnimStartColor : cyan;
$winAnimEndColor : #508ABB;
// html, body, div, span, a, li, td, th {
// font-family: 'Lato', sans-serif;
// font-weight: 300;
//
// }
@-webkit-keyframes winAnim{
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@-moz-keyframes winAnim{
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@-o-keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style:none;/*IE*/
}
.center-box{
margin : auto;
position: absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
html,body{
//background-image: linear-gradient(to bottom,#dddbd1,#d2dbdc);
background-color: #d2dbdc;
height : 100%;
width : 100%;
}
.app{
@extend .center-box;
width : 80%;
height : 70%;
max-width: 550px;
background-color : $app-background-color;
box-shadow: 0 5px 30px -5px rgba(0,0,0, .85);
border-radius: 10px;
.app-container,
.app-row{
height: $app-row-height;
}
}
.play-box,.symbol-option{
font-family: 'Yesteryear', cursive;
}
.play-box{
border-bottom : 2px solid #fff;
border-right : 2px solid #fff;
height : $app-row-height / 3;
cursor: pointer;
position: relative;
&.last-right{
border-right : none;
}
&.last-bottom{
border-bottom : none;
}
&.win {
-webkit-animation: winAnim .2s ease-out infinite;
-moz-animation: winAnim .2s ease-out infinite;
-o-animation: winAnim .2s ease-out infinite;
animation: winAnim .2s ease-out infinite;
animation : winAnim .5s infinite;
}
.symbol{
@extend .center-box;
width: 50%;
height : 50px;
text-align: center;
line-height : 50px;
font-size: 35px;
color : white;
}
}
.modal-content{
.content{
padding : 15px;
text-align: center;
margin : 0;
&.body{
line-height: 2;
}
}
.symbol-options{
width: 200px;
margin-top: 10px;
.symbol-option{
&:first-child{
margin-right: 10px;
}
&:last-child{
margin-left: 10px;
}
}
}
.warning-hr{
margin: 0;
}
}
</style>
</head>
<body>
<div class="app">
<div class="container-fluid app-container">
<div class="row app-row">
<div class="col-xs-4 play-box" id="0">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="1">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right" id="2">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="3">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="4">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right" id="5">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-bottom" id="6">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-bottom" id="7">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right last-bottom" id="8">
<div class="symbol"></div>
</div>
</div>
</div>
</div>
<div class="modal fade app-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-size">
<div class="modal-content">
<h3 class="content heading">Warning!!!</h3>
<hr class="warning-hr">
<div class="content body">
Please save your time and don't even think you're smart. <br><strong><em>I'M SMARTER THAN YOU! HA-HA-HA!!!</em></strong> <br>
Wana try me? Chose : <br>
<div class="center-block symbol-options">
<button class="symbol-option btn btn-default btn-md" data-dismiss="modal">X</button> OR <button class="symbol-option btn btn-default btn-md" data-dismiss="modal">O</button>
</div>
</div>
</div>
</div>
</div>
<script src="../js/bundled/tictactoe.bundled.js">
</script>
</body>
</html>4.创建一个JavaScript倒数计时器开始停止重置
许多现代网站和博客都使用倒数计时器来显示倒数，例如，我们通过使用倒数计时器来告诉在线商店的访问者，商品价格将在价格上涨后增加销售量。具体时间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS创建垂直时间轴（里程碑）</title>
<style type="text/css">
/* Variabes */
$orange: #ffa600;
$grey:#f3f3f3;
$white: #fff;
$base-color:$orange ;
/* Mixin's */
@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@mixin corners ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}
body {
background:$base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height:100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
color:$white;
text-align:center;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
#seconds, #tens{
font-size:2em;
}
button{
@include corners (5px);
background:$base-color;
color:$white;
border: solid 1px $white;
text-decoration:none;
cursor:pointer;
font-size:1.2em;
padding:18px 10px;
width:180px;
margin: 10px;
outline: none;
&:hover{
@include transition;
background:$white;
border: solid 1px $white;
color:$base-color;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Stopwatch</h1>
<h2>Vanilla JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
<script type="text/javascript">
window.onload = function () {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval ;
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}<script src="../js/bundled/tictactoe.bundled.js">
</script>
}
</script>
</body>
</html>5.用JavaScript创建一个简单的乒乓球游戏
我可以用JavaScript构建游戏吗？答案是肯定的，使用javascript甚至可以创建复杂的游戏，但是在这种情况下，我们将专注于一个简单的游戏，该游戏可让您练习HTML CSS和javascript技能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用js调用设备摄像头并实现拍照</title>
<style type="text/css">
body {
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
// Global Variables
var DIRECTION = {
IDLE: 0,
UP: 1,
DOWN: 2,
LEFT: 3,
RIGHT: 4
};
var rounds = [5, 5, 3, 3, 2];
var colors = ['#1abc9c', '#2ecc71', '#3498db', '#e74c3c', '#9b59b6'];
// The ball object (The cube that bounces back and forth)
var Ball = {
new: function (incrementedSpeed) {
return {
width: 18,
height: 18,
x: (this.canvas.width / 2) - 9,
y: (this.canvas.height / 2) - 9,
moveX: DIRECTION.IDLE,
moveY: DIRECTION.IDLE,
speed: incrementedSpeed || 9
};
}
};
// The paddle object (The two lines that move up and down)
var Paddle = {
new: function (side) {
return {
width: 18,
height: 70,
x: side === 'left' ? 150 : this.canvas.width - 150,
y: (this.canvas.height / 2) - 35,
score: 0,
move: DIRECTION.IDLE,
speed: 10
};
}
};
var Game = {
initialize: function () {
this.canvas = document.querySelector('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.width = 1400;
this.canvas.height = 1000;
this.canvas.style.width = (this.canvas.width / 2) + 'px';
this.canvas.style.height = (this.canvas.height / 2) + 'px';
this.player = Paddle.new.call(this, 'left');
this.paddle = Paddle.new.call(this, 'right');
this.ball = Ball.new.call(this);
this.paddle.speed = 8;
this.running = this.over = false;
this.turn = this.paddle;
this.timer = this.round = 0;
this.color = '#2c3e50';
Pong.menu();
Pong.listen();
},
endGameMenu: function (text) {
// Change the canvas font size and color
Pong.context.font = '50px Courier New';
Pong.context.fillStyle = this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
Pong.context.fillRect(
Pong.canvas.width / 2 - 350,
Pong.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color;
Pong.context.fillStyle = '#ffffff';
// Draw the end game menu text ('Game Over' and 'Winner')
Pong.context.fillText(text,
Pong.canvas.width / 2,
Pong.canvas.height / 2 + 15
);
setTimeout(function () {
Pong = Object.assign({}, Game);
Pong.initialize();
}, 3000);
},
menu: function () {
// Draw all the Pong objects in their current state
Pong.draw();
// Change the canvas font size and color
this.context.font = '50px Courier New';
this.context.fillStyle = this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
this.context.fillRect(
this.canvas.width / 2 - 350,
this.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color;
this.context.fillStyle = '#ffffff';
// Draw the 'press any key to begin' text
this.context.fillText('Press any key to begin',
this.canvas.width / 2,
this.canvas.height / 2 + 15
);
},
// Update all objects (move the player, paddle, ball, increment the score, etc.)
update: function () {
if (!this.over) {
// If the ball collides with the bound limits - correct the x and y coords.
if (this.ball.x <= 0) Pong._resetTurn.call(this, this.paddle, this.player);
if (this.ball.x >= this.canvas.width - this.ball.width) Pong._resetTurn.call(this, this.player, this.paddle);
if (this.ball.y <= 0) this.ball.moveY = DIRECTION.DOWN;
if (this.ball.y >= this.canvas.height - this.ball.height) this.ball.moveY = DIRECTION.UP;
// Move player if they player.move value was updated by a keyboard event
if (this.player.move === DIRECTION.UP) this.player.y -= this.player.speed;
else if (this.player.move === DIRECTION.DOWN) this.player.y += this.player.speed;
// On new serve (start of each turn) move the ball to the correct side
// and randomize the direction to add some challenge.
if (Pong._turnDelayIsOver.call(this) && this.turn) {
this.ball.moveX = this.turn === this.player ? DIRECTION.LEFT : DIRECTION.RIGHT;
this.ball.moveY = [DIRECTION.UP, DIRECTION.DOWN][Math.round(Math.random())];
this.ball.y = Math.floor(Math.random() * this.canvas.height - 200) + 200;
this.turn = null;
}
// If the player collides with the bound limits, update the x and y coords.
if (this.player.y <= 0) this.player.y = 0;
else if (this.player.y >= (this.canvas.height - this.player.height)) this.player.y = (this.canvas.height - this.player.height);
// Move ball in intended direction based on moveY and moveX values
if (this.ball.moveY === DIRECTION.UP) this.ball.y -= (this.ball.speed / 1.5);
else if (this.ball.moveY === DIRECTION.DOWN) this.ball.y += (this.ball.speed / 1.5);
if (this.ball.moveX === DIRECTION.LEFT) this.ball.x -= this.ball.speed;
else if (this.ball.moveX === DIRECTION.RIGHT) this.ball.x += this.ball.speed;
// Handle paddle (AI) UP and DOWN movement
if (this.paddle.y > this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y -= this.paddle.speed / 1.5;
else this.paddle.y -= this.paddle.speed / 4;
}
if (this.paddle.y < this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y += this.paddle.speed / 1.5;
else this.paddle.y += this.paddle.speed / 4;
}
// Handle paddle (AI) wall collision
if (this.paddle.y >= this.canvas.height - this.paddle.height) this.paddle.y = this.canvas.height - this.paddle.height;
else if (this.paddle.y <= 0) this.paddle.y = 0;
// Handle Player-Ball collisions
if (this.ball.x - this.ball.width <= this.player.x && this.ball.x >= this.player.x - this.player.width) {
if (this.ball.y <= this.player.y + this.player.height && this.ball.y + this.ball.height >= this.player.y) {
this.ball.x = (this.player.x + this.ball.width);
this.ball.moveX = DIRECTION.RIGHT;
beep1.play();
}
}
// Handle paddle-ball collision
if (this.ball.x - this.ball.width <= this.paddle.x && this.ball.x >= this.paddle.x - this.paddle.width) {
if (this.ball.y <= this.paddle.y + this.paddle.height && this.ball.y + this.ball.height >= this.paddle.y) {
this.ball.x = (this.paddle.x - this.ball.width);
this.ball.moveX = DIRECTION.LEFT;
beep1.play();
}
}
}
// Handle the end of round transition
// Check to see if the player won the round.
if (this.player.score === rounds[this.round]) {
// Check to see if there are any more rounds/levels left and display the victory screen if
// there are not.
if (!rounds[this.round + 1]) {
this.over = true;
setTimeout(function () { Pong.endGameMenu('Winner!'); }, 1000);
} else {
// If there is another round, reset all the values and increment the round number.
this.color = this._generateRoundColor();
this.player.score = this.paddle.score = 0;
this.player.speed += 0.5;
this.paddle.speed += 1;
this.ball.speed += 1;
this.round += 1;
beep3.play();
}
}
// Check to see if the paddle/AI has won the round.
else if (this.paddle.score === rounds[this.round]) {
this.over = true;
setTimeout(function () { Pong.endGameMenu('Game Over!'); }, 1000);
}
},
// Draw the objects to the canvas element
draw: function () {
// Clear the Canvas
this.context.clearRect(
0,
0,
this.canvas.width,
this.canvas.height
);
// Set the fill style to black
this.context.fillStyle = this.color;
// Draw the background
this.context.fillRect(
0,
0,
this.canvas.width,
this.canvas.height
);
// Set the fill style to white (For the paddles and the ball)
this.context.fillStyle = '#ffffff';
// Draw the Player
this.context.fillRect(
this.player.x,
this.player.y,
this.player.width,
this.player.height
);
// Draw the Paddle
this.context.fillRect(
this.paddle.x,
this.paddle.y,
this.paddle.width,
this.paddle.height
);
// Draw the Ball
if (Pong._turnDelayIsOver.call(this)) {
this.context.fillRect(
this.ball.x,
this.ball.y,
this.ball.width,
this.ball.height
);
}
// Draw the net (Line in the middle)
this.context.beginPath();
this.context.setLineDash([7, 15]);
this.context.moveTo((this.canvas.width / 2), this.canvas.height - 140);
this.context.lineTo((this.canvas.width / 2), 140);
this.context.lineWidth = 10;
this.context.strokeStyle = '#ffffff';
this.context.stroke();
// Set the default canvas font and align it to the center
this.context.font = '100px Courier New';
this.context.textAlign = 'center';
// Draw the players score (left)
this.context.fillText(
this.player.score.toString(),
(this.canvas.width / 2) - 300,
200
);
// Draw the paddles score (right)
this.context.fillText(
this.paddle.score.toString(),
(this.canvas.width / 2) + 300,
200
);
// Change the font size for the center score text
this.context.font = '30px Courier New';
// Draw the winning score (center)
this.context.fillText(
'Round ' + (Pong.round + 1),
(this.canvas.width / 2),
35
);
// Change the font size for the center score value
this.context.font = '40px Courier';
// Draw the current round number
this.context.fillText(
rounds[Pong.round] ? rounds[Pong.round] : rounds[Pong.round - 1],
(this.canvas.width / 2),
100
);
},
loop: function () {
Pong.update();
Pong.draw();
// If the game is not over, draw the next frame.
if (!Pong.over) requestAnimationFrame(Pong.loop);
},
listen: function () {
document.addEventListener('keydown', function (key) {
// Handle the 'Press any key to begin' function and start the game.
if (Pong.running === false) {
Pong.running = true;
window.requestAnimationFrame(Pong.loop);
}
// Handle up arrow and w key events
if (key.keyCode === 38 || key.keyCode === 87) Pong.player.move = DIRECTION.UP;
// Handle down arrow and s key events
if (key.keyCode === 40 || key.keyCode === 83) Pong.player.move = DIRECTION.DOWN;
});
// Stop the player from moving when there are no keys being pressed.
document.addEventListener('keyup', function (key) { Pong.player.move = DIRECTION.IDLE; });
},
// Reset the ball location, the player turns and set a delay before the next round begins.
_resetTurn: function(victor, loser) {
this.ball = Ball.new.call(this, this.ball.speed);
this.turn = loser;
this.timer = (new Date()).getTime();
victor.score++;
beep2.play();
},
// Wait for a delay to have passed after each turn.
_turnDelayIsOver: function() {
return ((new Date()).getTime() - this.timer >= 1000);
},
// Select a random color as the background of each level/round.
_generateRoundColor: function () {
var newColor = colors[Math.floor(Math.random() * colors.length)];
if (newColor === this.color) return Pong._generateRoundColor();
return newColor;
}
};
var Pong = Object.assign({}, Game);
Pong.initialize();
</script>
</body>
</html>本篇未完结，请继续看下一篇：手把手教你7个有趣的JavaScript 项目-下「附源码」
推荐JavaScript经典实例学习资料文章
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范：命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
本文暂时没有评论，来添加一个吧(●'◡'●)