Skip to content

Instantly share code, notes, and snippets.

@zai1208

zai1208/index.html

Created April 11, 2020 10:41
Show Gist options
  • Save zai1208/87c91fa5018ab863774903a40cf95f91 to your computer and use it in GitHub Desktop.
Save zai1208/87c91fa5018ab863774903a40cf95f91 to your computer and use it in GitHub Desktop.
Download ZIP
Game // source https://jsbin.com/cuhodam
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<style>
canvas {
border : 1px solid black;
}
button {
padding: 50 px;
}
.button1 {
background-color: #ff0000;
}
.button2 {
background-color: #00ff00;
}
</style>
<canvas width="200" height="200" id="gsc"></canvas>
<br>
<br>
<button onclick="stop()" class="button button1">Stop</button>
<button onclick="start()"class="button button2">Start</button>
<script>
</script>
<script id="jsbin-javascript">
let canvas = document.getElementById("gsc");
let ctx = canvas.getContext('2d');
this.position = {x: 0, y: 0};
this.position2 = {x: 190, y: 0};
let state = "start";
function stop() {
state = "stop";
}
function start() {
state = "start";
}
function gameLoop() {
ctx.clearRect(0, 0, 200, 200);
ctx.fillRect(this.position.x, this.position.y, 10, 10);
ctx.fillRect(this.position2.x, this.position2.y, 10, 10);
if (state == "stop") {
this.position.x += 0;
this.position.y += 0;
this.position2.x += 0;
this.position2.y += 0;
}
if (state == "start") {
if (this.position.x !== 200 || this.position2.x !== 0){
this.position.x += 1;
this.position2.x -= 1;
}
if (this.position.y !== 190 || this.position2.y !== 190)
{
this.position.y += 1
this.position2.y += 1;
}
if (this.position.x == 200 || this.position2.x == 0) {
this.position.x = 0;
this.position2.x = 190;
}
if (this.position.y == 190 || this.position2.y == 190) {
this.position.y = 0;
this.position2.y = 0;
}
}
requestAnimationFrame(gameLoop);
}
gameLoop();
requestAnimationFrame(gameLoop);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<style>
canvas {
border : 1px solid black;
}
button {
padding: 50 px;
}
.button1 {
background-color: #ff0000;
}
.button2 {
background-color: #00ff00;
}
</style>
<canvas width="200" height="200" id="gsc"></canvas>
<br>
<br>
<button onclick="stop()" class="button button1">Stop</button>
<button onclick="start()"class="button button2">Start</button>
<script>
<\/script>
</body>
</html> </script>
</body>
</html>
Raw
jsbin.cuhodam.js
let canvas = document.getElementById("gsc");
let ctx = canvas.getContext('2d');
this.position = {x: 0, y: 0};
this.position2 = {x: 190, y: 0};
let state = "start";
function stop() {
state = "stop";
}
function start() {
state = "start";
}
function gameLoop() {
ctx.clearRect(0, 0, 200, 200);
ctx.fillRect(this.position.x, this.position.y, 10, 10);
ctx.fillRect(this.position2.x, this.position2.y, 10, 10);
if (state == "stop") {
this.position.x += 0;
this.position.y += 0;
this.position2.x += 0;
this.position2.y += 0;
}
if (state == "start") {
if (this.position.x !== 200 || this.position2.x !== 0){
this.position.x += 1;
this.position2.x -= 1;
}
if (this.position.y !== 190 || this.position2.y !== 190)
{
this.position.y += 1
this.position2.y += 1;
}
if (this.position.x == 200 || this.position2.x == 0) {
this.position.x = 0;
this.position2.x = 190;
}
if (this.position.y == 190 || this.position2.y == 190) {
this.position.y = 0;
this.position2.y = 0;
}
}
requestAnimationFrame(gameLoop);
}
gameLoop();
requestAnimationFrame(gameLoop);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment