<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>game</title>
<style>
html,body{
height:100%;
margin:0;
}
#svg1{
width:500px;
height:500px;
border:1px solid grey;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<svg id="svg1">
<g id="g1"></g>
</svg>
<div id="div1"></div>
<script>
var svg1=document.getElementById("svg1");
var g1=document.getElementById("g1");
var svgw=svg1.clientWidth;
var svgh=svg1.clientHeight;
var div1=document.getElementById("div1");
var mColor = ["red","blue","green","gold"];
var x0=0;
var y0=0;
var box1,color1,boxcol1;
div1.innerHTML="svg width: "+svgw+" svg height: "+svgh;
function mouseClick(event){
mx=Math.floor(event.clientX/50)*50;
my=Math.floor(event.clientY/50)*50;
box1=document.getElementById(mx+"_"+my);
boxcol1=box1.getAttribute("fill");
g1.removeChild(box1);
div1.innerHTML="svg width: "+svgw+" height: "+svgh+"<br>click x: "+mx+" y: "+my+" color:"+boxcol1;
}
for(i=0;i<=9;i++){
for(j=0;j<=9;j++){
color1=mColor[Math.floor(Math.random() * mColor.length)];
var rect1 = document.createElementNS(svg1.namespaceURI, "rect");
rect1.setAttributeNS(null, "x", x0);
rect1.setAttributeNS(null, "y", y0);
rect1.setAttributeNS(null, "width", "50px");
rect1.setAttributeNS(null, "height", "50px");
rect1.setAttributeNS(null, "fill",color1);
rect1.setAttributeNS(null, "id",x0+"_"+y0);
rect1.setAttributeNS(null, "id",x0+"_"+y0);
g1.appendChild(rect1);
x0=x0+50;
}
x0=0;
y0=y0+50;
}
svg1.onclick=mouseClick;
</script>
</body>
</html>
vendredi 31 mai 2019
mardi 28 mai 2019
js snake
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>snake</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
font-size: 12px;
overflow: hidden;
}
#svg1 {
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<svg id="svg1">
<g id="g1">
</g>
</svg>
<div id="div1">
</div>
<script>
var ww = window.innerWidth;
var wh = window.innerHeight;
var svg1 = document.getElementById("svg1");
var g1 = document.getElementById("g1");
var div1 = document.getElementById("div1");
var x0 = ww / 2;
var y0 = wh / 2;
var x1, y1;
var i = 1;
var max = 500;
var changecolor = 0;
var color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);
var radius = 20;
var myArray = [-1.57, 0, 1.57, 3.14];
var check = [];
var angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1;
function Dopamine() {
var path1 = document.createElementNS(svg1.namespaceURI, "path");
path1.setAttributeNS(null, "d", "m" + x0 + " " + y0 + "L" + x1 + " " + y1);
path1.setAttributeNS(null,"stroke",color1);
path1.setAttributeNS(null, "stroke-width", "10px");
path1.setAttributeNS(null, "fill", "none");
path1.setAttributeNS(null, "opacity", "0.5");
path1.setAttributeNS(null, "stroke-linecap", "round");
g1.appendChild(path1);
changecolor++;
if(changecolor==10){color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);changecolor=0;}
i++;
if (i == max + 1) {
g1.removeChild(g1.firstChild);
i = max;
}
x0 = x1;
y0 = y1;
if (check[0] == 0) {
myArray = [-1.57, 0, 1.57]
}
if (check[0] == 3.14) {
myArray = [-1.57, 3.14, 1.57]
}
if (check[0] == 1.57) {
myArray = [1.57, 3.14, 0]
}
if (check[0] == -1.57) {
myArray = [-1.57, 3.14, 0]
}
check.pop();
angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
if (x1 < 0) {
x1 = x1 + (radius * 2);
}
if (x1 > ww) {
x1 = x1 - (radius * 2);
}
if (y1 < 0) {
y1 = y1 + (radius * 2);
}
if (y1 > wh) {
y1 = y1 - (radius * 2);
}
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1 + "<br>check : " + check;
}
setInterval(Dopamine, 90);
</script>
</body>
</html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>snake</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
font-size: 12px;
overflow: hidden;
}
#svg1 {
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<svg id="svg1">
<g id="g1">
</g>
</svg>
<div id="div1">
</div>
<script>
var ww = window.innerWidth;
var wh = window.innerHeight;
var svg1 = document.getElementById("svg1");
var g1 = document.getElementById("g1");
var div1 = document.getElementById("div1");
var x0 = ww / 2;
var y0 = wh / 2;
var x1, y1;
var i = 1;
var max = 500;
var changecolor = 0;
var color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);
var radius = 20;
var myArray = [-1.57, 0, 1.57, 3.14];
var check = [];
var angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1;
function Dopamine() {
var path1 = document.createElementNS(svg1.namespaceURI, "path");
path1.setAttributeNS(null, "d", "m" + x0 + " " + y0 + "L" + x1 + " " + y1);
path1.setAttributeNS(null,"stroke",color1);
path1.setAttributeNS(null, "stroke-width", "10px");
path1.setAttributeNS(null, "fill", "none");
path1.setAttributeNS(null, "opacity", "0.5");
path1.setAttributeNS(null, "stroke-linecap", "round");
g1.appendChild(path1);
changecolor++;
if(changecolor==10){color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);changecolor=0;}
i++;
if (i == max + 1) {
g1.removeChild(g1.firstChild);
i = max;
}
x0 = x1;
y0 = y1;
if (check[0] == 0) {
myArray = [-1.57, 0, 1.57]
}
if (check[0] == 3.14) {
myArray = [-1.57, 3.14, 1.57]
}
if (check[0] == 1.57) {
myArray = [1.57, 3.14, 0]
}
if (check[0] == -1.57) {
myArray = [-1.57, 3.14, 0]
}
check.pop();
angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
if (x1 < 0) {
x1 = x1 + (radius * 2);
}
if (x1 > ww) {
x1 = x1 - (radius * 2);
}
if (y1 < 0) {
y1 = y1 + (radius * 2);
}
if (y1 > wh) {
y1 = y1 - (radius * 2);
}
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1 + "<br>check : " + check;
}
setInterval(Dopamine, 90);
</script>
</body>
</html>
vendredi 24 mai 2019
Inscription à :
Articles (Atom)